@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  #cta {
    @apply bg-[url('/images/bg-boost-mobile.svg')];
    @apply bg-no-repeat bg-cover;
  }
  @media screen(md) {
    #cta {
      @apply bg-[url('/images/bg-boost-desktop.svg')];
    }
  }
  .ficon:hover {
    filter: invert(79%) sepia(61%) saturate(464%) hue-rotate(130deg)
      brightness(89%) contrast(85%);
  }
  .hamburger {
    @apply cursor-pointer w-6 h-6 transition-all duration-[.25s] relative;
  }
  .hamburger-top,
  .hamburger-middle,
  .hamburger-bottom {
    @apply absolute w-6 h-[3px] top-0 left-0 bg-[#9c9aa6] transition-all duration-500 rotate-0;
  }
  .hamburger-middle {
    @apply translate-y-[7px];
  }
  .hamburger-bottom {
    @apply translate-y-[14px];
  }
  .open {
    @apply rotate-90 translate-x-0;
  }
  .open .hamburger-top {
    @apply rotate-45 translate-y-[6px];
  }
  .open .hamburger-middle {
    @apply hidden;
  }
  .open .hamburger-bottom {
    @apply -rotate-45 translate-y-[6px];
  }
}
